<template>
  <!-- 返回组件 -->
  <navTabrBack
    :navbackStyle="['padding-right: 20rpx']"
    :title="'搜索'"
    :titleStyle="['padding: 0 28rpx;']"
  ></navTabrBack>
  <view class="content">
    <!-- 筛选按钮 -->
    <view class="serchBtn">
      <button
        :class="type == 0 ? 'checkout' : 'noCheck'"
        @click="checkFlage(0)"
        type="primary"
      >
        专利集
      </button>
      <button
        :class="type == 1 ? 'checkout' : 'noCheck'"
        @click="checkFlage(1)"
        type="primary"
      >
        专利
      </button>
    </view>

    <!-- 搜索 -->
    <view class="indexSerch">
      <view class="iconSerch iconfont icon-sousuo"></view>

      <input
        class="indexInput"
        maxlength="200"
        placeholder-style="color: #999999;"
        placeholder="输入专利集/专利名称"
        confirm-type="search"
        @confirm="doSearch"
        @input="onValue"
        v-model="value"
      />
    </view>

    <!-- 条件搜索 -->
    <template v-if="type == 0"
      ><serchDataSet
        :dataList="dataList"
        :deType="deType"
        :isOrder="isOrder"
        :total="total"
      ></serchDataSet
    ></template>
    <template v-else="type == 1"
      ><serchPatent
        :patentData="patentData"
        :deType="deType"
        :isOrder="isOrder"
        :total="total"
      ></serchPatent
    ></template>
  </view>
</template>

<script setup>
import { onMounted, inject, reactive, toRefs } from "vue";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
const $url = inject("$url");
const $imgSrc = inject("$imgSrc")
let data = reactive({
  type: 0,
  deType: 0,
  typeArr: ["", "&orderByTime=asc", "&orderByNum=asc"],
  dataList: [],
  patentData: [],
  page: 1,
  dic: [],
  arr1: [],
  value: "",
  total: 0,
});
onLoad((item) => {
  data.deType = item.deType;
  data.type = item.type;
  if (item.value) {
    data.value = item.value;
  }
  data.page = 1,
  data.dataList = []
  data.patentData = []
  updataList();
  uni.request({
    url: $url + `/zlBaseType/getZlBaseTypeList `,
    method: "GET",
    timeout: 6000,
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      data.dic = res.data.data.list;
    },
  });
});
let { type, value, dic, dataList, patentData, deType, total } = toRefs(data);
onPullDownRefresh(() => {
  data.dataList = [];
  data.patentData = [];
  data.page = 1;
  updataList();
  uni.stopPullDownRefresh();
});
onReachBottom(() => {
  data.page = data.page + 1;
  updataList();
});
const updataList = () => {
  if (data.type == 0) {
    /* 
        name //专利集名称
        orderByTime //传值 "asc" ,"desc"
        orderByNum //传值 "asc","desc" 
    */
    uni.request({
      url:
        $url +
        `/base/getZlGroupList?page=${data.page}&pageSize=10${
          data.value?.trim().length > 0 ? "&name=" + data.value?.trim() : ""
        }${data.typeArr[data.deType]}&status=1&auditStatus=1`,
      method: "GET",
      timeout: 6000,
      fail: (err) => {},
      success(res) {
        data.total = res.data.data.total;
        res.data.data.list?.map((item) => {
          if (item.img.indexOf("htt")) {
            item.img = $imgSrc + "/" + item.img;
            data.dataList.push(item);
          } else {
            data.dataList.push(item);
          }
        });
      },
    });
  } else {
    // 请求专利推荐数据
    uni.request({
      url:
        $url +
        `/base/getZlBaseProdList?page=${data.page}&pageSize=10${
          data.value?.trim().length > 0 ? "&keyword=" + data.value?.trim() : ""
        }${data.typeArr[data.deType]}`,
      method: "GET",
      timeout: 6000,
      fail: (err) => {},
      success(res) {
        data.total = res.data.data.total;
        res.data.data.list.map((item) => {
          data.dic.map((res) => {
            if (res.ID == item.type) {
              item.type = res.name;
            }
          });
          data.patentData.push(item);
        });
      },
    });
  }
};
// 按钮切换
const checkFlage = (num) => {
  data.page = 1;
  data.dataList = [];
  data.patentData = [];
  data.type = num;
  data.deType = 0;
  updataList();
};
const isOrder = (index) => {
  data.page = 1;
  data.patentData = [];
  data.dataList = [];
  data.deType = index;
  updataList();
};
//
const doSearch = () => {
    data.page = 1;
    data.patentData = [];
    data.dataList = [];
  updataList(data.value.trim());
};
const onValue = (e) => {
  data.value = e.detail.value;
  if (e.detail.value.trim().length < 1) {
    data.page = 1;
    data.patentData = [];
    data.dataList = [];
    updataList();
  }
};
</script>

<style scoped>
.content {
  padding: 0 28rpx;
  padding-bottom: 55rpx;
}
.serchBtn {
  margin-top: 29rpx;
  display: flex;
  justify-content: space-between;
}
.serchBtn button:after {
  border: 0;
}
.serchBtn button {
  width: 337rpx;
  height: 74rpx;
  border-radius: 36rpx;
  line-height: 74rpx;
  font-size: 27rpx;
  font-weight: 400;
  background: #f5f5f5;
}
.checkout {
  background: #1677ff !important;
  color: #ffffff !important;
}
.noCheck {
  background: #f5f5f5 !important;
  color: #999999 !important;
}
/* 搜索栏 */
.indexSerch {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 23rpx;
  height: 72rpx;
  background: #ffffff;
  border-radius: 36rpx;
  padding-left: 76rpx;
  background: #f5f5f5;
}
.indexInput {
  width: 85%;
  height: 36rpx;
  font-size: 25rpx;
}
.iconSerch {
  position: absolute;
  left: 18rpx;
  top: 18rpx;
  font-size: 35rpx;
  color: #999999;
}
</style>
